//
// Module menu
//

// Module base
@module-menu-color: #fff;
@module-menu-bg: #222;
@module-menu-border-color: #111;

// Module group
@module-menu-group-color: @module-menu-color;
@module-menu-group-bg: @module-menu-bg;
@module-menu-group-expanded-bg: @module-menu-bg;

// Module links
@module-menu-link-border-radius: 0 @border-radius-small @border-radius-small 0;
@module-menu-link-color: #aaa;
@module-menu-link-hover-color: @module-menu-color;
@module-menu-link-hover-bg: lighten(@module-menu-bg,3%);
@module-menu-link-active-color: #fff;
@module-menu-link-active-bg: lighten(@module-menu-bg,15%);
@module-menu-item-padding-vertical: 4px;
@module-menu-item-padding-horizontal: 9px;

// Module menu container
[id="typo3-module-menu"] {
	background: @module-menu-bg;
	color: @module-menu-color;
}

// Invisible module menu drag handler
[id="typo3-module-menu-xsplit"] {
	z-index: 10;
	width: 1px;
	background-color: lighten(@module-menu-border-color,10%);
	.box-shadow(2px 0px 3px rgba(0,0,0,0.5));
	&:hover {
		.box-shadow(2px 0px 3px rgba(0,0,0,0.9));
	}
	.x-layout-mini-wrapper {
		left: -7px;
		width: 15px;
	}
}

// Module menu styling
[id="typo3-menu"] {
	.list-unstyled();

	/// Module menu group
	.typo3-module-menu-group-container {
		clear: both;
		.list-unstyled();
		padding-right: 15px;
	}
	.typo3-module-menu-group {
		.transition(background-color 0.4s ease-in-out);
		position: relative;
		color: @module-menu-group-color;
		background-color: @module-menu-group-bg;
		border-top: 1px solid lighten(@module-menu-border-color,10%);
		border-bottom: 1px solid @module-menu-border-color;
		padding: 5px 0;
	}
	.typo3-module-menu-group.expanded {
		background-color: @module-menu-group-expanded-bg;
	}
	.typo3-module-menu-group-header {
		.clearfix();
		position: relative;
		cursor: pointer;
		display: block;
		padding: @module-menu-item-padding-vertical @module-menu-item-padding-horizontal;
		text-transform: uppercase;
	}

	// Module menu item
	.typo3-module-menu-item {
		margin: 1px 0;
	}

	// Module menu links
	.typo3-module-menu-item-link {
		.clearfix();
		position: relative;
		cursor: pointer;
		display: block;
		padding: @module-menu-item-padding-vertical @module-menu-item-padding-horizontal;
		color: @module-menu-link-color;
		border-radius: @module-menu-link-border-radius;
		text-decoration: none;
		&:focus,
		&:hover {
			outline: none;
			color: @module-menu-link-hover-color;
			background-color: @module-menu-link-hover-bg;
		}
	}
	.typo3-module-menu-item.active {
		.typo3-module-menu-item-link {
			color: @module-menu-link-active-color;
			background-color: @module-menu-link-active-bg;
		}
	}

	// Module menu icons
	.typo3-module-menu-group-icon,
	.typo3-module-menu-item-icon {
		float: left;
		margin-right: 10px;
	}
	.typo3-module-menu-group-icon {
		background-color: transparent;
		&:after {
			display: none;
		}
	}

	// Module menu group and item titles
	.typo3-module-menu-group-title,
	.typo3-module-menu-item-title {
		white-space: nowrap;
		text-overflow: ellipsis;
		padding-top: 5px;
		display: block;
		overflow: hidden;
		*zoom: 1;
	}
	.typo3-module-menu-group-title {
		padding-right: 20px;
		.caret {
			.transition(all 0.25s ease-in-out);
			.rotate(90deg);
			position: absolute;
			top: 15px;
			right: 18px;
		}
	}

	// Module Group Expanded
	.expanded {
		.typo3-module-menu-group-title {
			.caret {
				.rotate(0deg);
			}
		}
	}
}

// Module menu snapped
.typo3-module-menu-snapped {
	.typo3-module-menu-group-container {
		padding-right: 0;
	}
	.typo3-module-menu-item-link {
		border-radius: 0;
	}
	.typo3-module-menu-group-title,
	.typo3-module-menu-item-title {
		display: none;
	}
}
